<template>
	<div class="document_player">
		<el-progress :percentage="percentage" :show-text="false"></el-progress>
		<iframe ref="iframe" :src="pdfSrc" frameborder="0" @load="handleLoadFinish"></iframe>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	name: 'documentPlayer',
	props: {
		fileSrc: String,
		data: { type: Object, default: () => {} },
		timeUpdate: Function,
		playStart: Function,
		playEnd: Function
	},
	data() {
		return {
			pdfTimer: null,
			curTime: 0
		};
	},
	computed: {
		pdfSrc() {
			return `/pdfjs/web/viewer.html?file=${this.fileSrc}`;
		},
		totalTime() {
			return parseFloat(this.data.strategy) * 60;
		},
		percentage() {
			return Math.round((this.curTime / this.totalTime) * 1000000) / 10000;
		}
	},
	destroyed() {
		if (!!this.pdfTimer) {
			this.handleClearInterval();
		}
	},
	methods: {
		handleLoadFinish() {
			let contentWindow = this.$refs['iframe'].contentWindow;
			!!contentWindow && (contentWindow.document.documentElement.scrollTop = 0);
			!!this.pdfTimer && this.handleClearInterval();
			this.pdfTimer = setInterval(() => {
				this.curTime++;
				this.timeUpdate(this.curTime);
				if (this.curTime >= this.totalTime) {
					this.playEnd(this.curTime);
					this.handleClearInterval();
				}
			}, 1000);
			this.playStart();
		},

		handleClearInterval() {
			clearInterval(this.pdfTimer);
			this.pdfTimer = null;
			this.curTime = 0;
		}
	}
};
</script>

<style lang="scss" scoped>
.document_player::v-deep {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	iframe {
		flex: 1;
		overflow: hidden;
	}
	.el-progress-bar__outer,
	.el-progress-bar__inner {
		border-radius: 0;
	}
}
</style>
